<template>
    <div class="mapbox-map001">
      <div id="map"></div>
    </div>
</template>
    
<script>  
  // 引入mapbox-gl
  import 'mapbox-gl/dist/mapbox-gl.css'
  import mapboxgl from 'mapbox-gl' // or "const mapboxgl = require('mapbox-gl');"
  
  export default {
    name: 'mapbox-map001',
    data: () => {
      return {
        centerLagLat: { lng: 119.30, lat: 29.5 },
        map: null,
        draw: null
      }
    },
    computed: {},
    methods: {
      // 初始化地图
      initMap() {
            //自定义地图服务  吉林一号底图
            let myStyle = {
              version: 8,
              name: "MapBoxStyle",
              glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
              sources: {
                JL1Source: {
                  type: "raster",
                  scheme: "xyz",
                  tiles: [
                    'https://api.jl1mall.com/getMap/{z}/{x}/{y}?mk=73ad26c4aa6957eef051ecc5a15308b4&tk=3eaf089e32d2ecfd0eabc53543b8610e&sch=wmts'
                  ],	
                  tileSize: 256,
                },
              },
              layers: [
              {
                  id: "JL1影像底图",
                  source: "JL1Source",
                  type: "raster",
                },
              ],
            };
  
            mapboxgl.accessToken = 'pk.eyJ1IjoieTk3MjEzaDUzIiwiYSI6ImNtMW0wcXFwbzBiOXMyaXF1MHY0dnhqYXEifQ.zzBAlo4dnId23vSJdfqjbg';//可用          
            const mbMap = new mapboxgl.Map({
                container: 'map',
                //style: 'mapbox://styles/mapbox/light-v11',
                style: myStyle, //可设置自己的底图服务
                //center: [0, 0],
                //zoom: 0
                minZoom: 0,
                maxZoom: 18,
                zoom: 5,
                center: [125.2,43.2],
            });
  
      }, //end_of_initMap()
  
    },
    mounted() {
      this.initMap()
    },
    created() {}
  }
</script>
  
<style>
  
#map {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid red;
}

</style>